import React from 'react';
import { connect } from 'dva';
import moment from 'moment'
import { Button, Table, Form, Input, Popconfirm,DatePicker, Select,TreeSelect,   } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;
import AddPatrolModal from '../../components/patrol/AddPatrolModal';
import ViewPatrolResultModal from '../../components/patrol/ViewPatrolResultModal';

function Patrol ({ dispatch, patrol, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, modalType,patrolId,assetCurrent,assetCurrentSize,assetTotal,roomList,newKey,userList, 
        patrolItem,modalViewVisible,detailList} = patrol

    const columns = [{
        title: '巡检名称',
        dataIndex: 'name',
        key: 'name',
        width: 120,
    },{
        title: '巡检类型',
        dataIndex: 'type',
        key: 'type',
        width: 100,
        render: (value, row, index) => {
            return (
                value==1?"定时巡检":value==2?"单次巡检":value==3?"临时巡检":""
            )
        }
    },{
        title: '巡检时间',
        dataIndex: 'inspectDate',
        key: 'inspectDate',
        width: 150,
        render: (value, row, index) => {
            return (
                value?new moment(value).format("YYYY-MM-DD")+" "+row.beginTime+"-"+row.endTime:''
            )
        }
    },{
        title: '责任人',
        dataIndex: 'operatiorName',
        key: 'operatiorName',
        width: 100,
    },{
        title: '制单人',
        dataIndex: 'createName',
        key: 'createName',
        width: 100,
    },{
        title: '制单时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 150,
    },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        render: (value, row, index) => {
            return (
                value==1?"未开始":value==2?"执行中":value==3?"已完成":value==4?"已超时":""
            )
        }
    }
    // ,{
    //     title: '备注',
    //     dataIndex: 'remark',
    //     key: 'remark',
    //     width: 120,
    // }
    ,{
        title: '操作',
        key: 'operation',
        width: 150,
        render: (text, record) => (
            <span>
              {(record.status==1)?(
                <span>
                    <a onClick={onEditItem.bind(null, record.id_)}>编辑</a>
                    <span className="ant-divider" />
                    <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                    <a>删除</a>
                    </Popconfirm>
                    <span className="ant-divider" />
                </span>
               ):(record.status==2||record.status==3)?(
                <span>
                    <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                    <a>删除</a>
                    </Popconfirm>
                    <span className="ant-divider" />
                </span>
               ):""}
               <a onClick={viewResult.bind(null, record.id_)}>查看详情</a>

            </span>
        ),
    }];

    const pagination = {
        current:patrol.current,
        pageSize:patrol.currentSize,
        total: patrol.total,
        showSizeChanger: true,
        showTotal: (total => '共' + patrol.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'patrol/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'patrol/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':patrol.currentSize} },
            });
        },
    };
    const editHandler = (id, values) => {
        dispatch({
            type: 'patrol/edit',
            payload: { id, ...values },
        });
    }
    const onEditItem = (id) => {
        dispatch({
            type: 'patrol/qryById',
            payload: id,
        })
    }
    const submitHandle = () => {
        dispatch({
            type: 'patrol/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    //清空搜索条件
    function handleClear(){
      form.resetFields();
    }

    // 查看巡检详情
    const viewResult = (id) => {
        dispatch({
            type: 'patrol/getPatrolResult',
            payload:{patrolId:id},
        })
    }
    //展开添加页面
    const addHandler = () => {
        dispatch({
        type: 'patrol/showModal',
        payload: {
            modalType: 'create',
        },
        })
    }
    //删除
    function deleteHandler(id) {
        dispatch({
        type: 'patrol/remove',
        payload: {id:id,search:{...getFieldsValue()}},
        });
    }

    const modalProps = {
        item: modalType === 'create' ? {} : currentItem,
        roomList: roomList,
        userList:userList,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        confirmLoading: loading,
        title: `${modalType === 'create' ? '新增巡检单' : '编辑巡检单'}`,
        wrapClassName: 'vertical-center-modal',
        newKey : newKey,
        onOk (data) {
            dispatch({
                type: `patrol/${modalType}`,
                payload: data,
            })
        },
        onCancel () {
            dispatch({
                type: 'patrol/hideModal',
            })
        },
    }

    const modalViewProps = {
        item: patrolItem,
        patrolId:patrolId,
        visible: modalViewVisible,
        detailList:detailList,
        dispatch:dispatch,
        assetCurrent:assetCurrent,
        assetCurrentSize:assetCurrentSize,
        assetTotal:assetTotal,
        maskClosable: false,
        confirmLoading: loading,
        title: ' 查看巡检详情',
        wrapClassName: 'vertical-center-modal',
        newKey : newKey,
        onCancel () {
            dispatch({
                type: 'patrol/hideViewModal',
                 payload: { detailList:[],assetCurrent:1,assetTotal:0}
            })
        },
  }

    const loopUser = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
         <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                    <FormItem>
                            {getFieldDecorator('type')(
                            <Select
                                showSearch
                                style={{ width: 100 }}
                                placeholder="选择巡检类型"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">定时巡检</Option>
                              <Option value="2">单次巡检</Option>
                             
                            </Select>
                    )}
                    </FormItem>
                    <FormItem>
                        { getFieldDecorator('status')(
                           <Select
                                showSearch
                                style={{ width: 100 }}
                                placeholder="选择巡检状态"
                                optionFilterProp="children"
                           >
                            <Option value="">全部</Option>
							<Option value="1">未开始</Option>
							<Option value="2">执行中</Option>
							<Option value="3">已完成</Option>
							<Option value="4">已超时</Option>
                            </Select>
                           )}
                    </FormItem>
                    <FormItem>
                        {
                            getFieldDecorator('operatiorBy')(
                             <Select
                                  showSearch
                                  style={{ width: 120 }}
                                  placeholder="选择责任人"
                                  optionFilterProp="children"
                              >
                              {loopUser(patrol.userList)}
                              </Select>
                            )
                         }
                    </FormItem>
                     <FormItem>
                           {getFieldDecorator('inspectDate')(
                                <RangePicker style={{ width:'230px' }}  format="YYYY-MM-DD" />
                            )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('name')(
                            <Input type="text" placeholder="巡检名称" style={{ width:'150px', marginRight: '3%' }} />
                        )}
                    </FormItem>

                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>

                    <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
                        <FormItem>
                            <Button type="primary" size='large' onClick={addHandler}>新增巡检单</Button>
                        </FormItem>
                    </div>
                </Form>
            </div>

            <div style={{width:'100%',padding:"30px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={patrol.list} pagination={pagination}
                />
            </div>
            <AddPatrolModal {...modalProps} />
            <ViewPatrolResultModal {...modalViewProps} />
            </div>
        </div>
    );
}

function mapStateToProps(state) {
  return { patrol : state.patrol,loading:state.loading.models.patrol};
}

Patrol = Form.create()(Patrol);
export default connect(mapStateToProps)(Patrol);
